<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="资讯ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入资讯ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="源文章ID" prop="sourceId">
        <el-input
          v-model="queryParams.sourceId"
          placeholder="请输入源文章ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="文章来源" prop="sourceUrl">
        <el-input
          v-model="queryParams.sourceUrl"
          placeholder="请输入文章来源"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="完整标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入完整标题"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="作者名称" prop="author">
        <el-input
          v-model="queryParams.author"
          placeholder="请输入作者名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="新闻频道(国际)" prop="newsChannel">
        <el-input
          v-model="queryParams.newsChannel"
          placeholder="请输入新闻频道(国际)"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['news:news:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['news:news:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['news:news:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['news:news:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="newsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['news:news:edit']" style="margin-left: 12px;">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['news:news:remove']">删除</el-button>
          <el-button link type="primary" icon="Upload" @click="handlePublish(scope.row)" v-hasPermi="['news:news:edit']" :disabled="scope.row.crawlerPublishList.length > 0">推送tanot</el-button>
          <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['news:news:list']">预览</el-button>
          <router-link 
            :to="{ path: `/news/preview/${scope.row.sourceId}` }"
            target="_blank" 
            class="router-link" 
            :title="`http://localhost/news/preview/${scope.row.sourceId}`"
          >
            <el-icon><View /></el-icon>
            <span>电脑预览</span>
          </router-link>
          <el-button link type="primary" icon="DocumentCopy" @click="handlerCopyPath(`http://localhost/news/preview/${scope.row.sourceId}`)" v-hasPermi="['news:news:list']">复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column label="资讯ID" align="center" prop="id" />
      <el-table-column label="源文章ID" align="center" prop="sourceId" />
      <!-- <el-table-column label="文章来源" align="center" prop="sourceUrl" /> -->
      <el-table-column label="爬取时间" align="center" prop="crawlTime" width="130">
        <template #default="scope">
          <span>{{ parseTime(scope.row.crawlTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完整标题" align="center" prop="title" width="130" />
      <el-table-column label="作者名称" align="center" prop="author" />

      <el-table-column label="图片预览" align="center" prop="crawlerImageList">
        <template #default="scope">
          <image-preview :src="scope.row.crawlerImageList.map(img => img.imgUrl).join(',')" :width="50" :height="50"/>
        </template>
      </el-table-column>
      
      <el-table-column label="点击量" align="center" prop="clickCount" />
      <el-table-column label="浏览量" align="center" prop="reviewCount" />
      <el-table-column label="点赞量" align="center" prop="upCount" />
      <el-table-column label="拉踩量" align="center" prop="opposeCount" />
      
      <el-table-column label="是否删除" align="center" prop="isDeleted" />
      <el-table-column label="标签" align="center" prop="tag" />
      <el-table-column label="新闻频道(国际)" align="center" prop="newsChannel" />

      <el-table-column label="发布时间" align="center" prop="releaseTime" width="130">
        <template #default="scope">
          <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="modifyTime" width="130">
        <template #default="scope">
          <span>{{ parseTime(scope.row.modifyTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="视频数量" align="center" prop="videoCount" />
      <el-table-column label="图片数量" align="center" prop="imageCount" />
      <el-table-column label="图集数量" align="center" prop="thumbCount" />
      <el-table-column label="爬虫浏览量" align="center" prop="crawlReviewCount" />

      <el-table-column label="news_type(未知1)" align="center" prop="newsType" />
      <el-table-column label="media_id(未知1)" align="center" prop="mediaId" />
      <el-table-column label="check_status(未知2)" align="center" prop="checkStatus" />
      <el-table-column label="lang(未知0)" align="center" prop="lang" />
      
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改资讯对话框 -->
    <el-dialog :title="title" v-model="open" width="1500px" append-to-body>
      <el-form ref="newsRef" :model="form" :rules="rules" label-width="150px">
        <el-col :span="23">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="资讯ID" prop="id" v-if="form.id">
                <el-input v-model="form.id" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="源文章ID" prop="sourceId">
                <el-input v-model="form.sourceId" placeholder="请输入源文章ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文章来源" prop="sourceUrl">
                <el-input v-model="form.sourceUrl" placeholder="请输入文章来源" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="media_id(未知1)" prop="mediaId">
                <el-input v-model="form.mediaId" placeholder="请输入media_id(未知1)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爬取时间" prop="crawlTime">
                <el-date-picker clearable
                  v-model="form.crawlTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择爬取时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发布时间" prop="releaseTime">
                <el-date-picker clearable
                  v-model="form.releaseTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择发布时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完整标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入完整标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者名称" prop="author">
                <el-input v-model="form.author" placeholder="请输入作者名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点击量" prop="clickCount">
                <el-input v-model="form.clickCount" placeholder="请输入点击量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="浏览量" prop="reviewCount">
                <el-input v-model="form.reviewCount" placeholder="请输入浏览量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="点赞量" prop="upCount">
                <el-input v-model="form.upCount" placeholder="请输入点赞量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拉踩量" prop="opposeCount">
                <el-input v-model="form.opposeCount" placeholder="请输入拉踩量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否删除" prop="isDeleted">
                <el-input v-model="form.isDeleted" placeholder="请输入是否删除" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签" prop="tag">
                <el-input v-model="form.tag" placeholder="请输入标签" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新闻频道(国际)" prop="newsChannel">
                <el-input v-model="form.newsChannel" placeholder="请输入新闻频道(国际)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="视频数量" prop="videoCount">
                <el-input v-model="form.videoCount" placeholder="请输入视频数量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片数量" prop="imageCount">
                <el-input v-model="form.imageCount" placeholder="请输入图片数量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图集数量" prop="thumbCount">
                <el-input v-model="form.thumbCount" placeholder="请输入图集数量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="lang(未知0)" prop="lang">
                <el-input v-model="form.lang" placeholder="请输入lang(未知0)" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爬虫浏览量" prop="crawlReviewCount">
                <el-input v-model="form.crawlReviewCount" placeholder="请输入爬虫浏览量" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-divider content-position="center">图片信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Plus" @click="handleAddCrawlerImage">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="Delete" @click="handleDeleteCrawlerImage">删除</el-button>
          </el-col>
        </el-row>
        <!-- 子 -->
        <el-table :data="crawlerImageList" :row-class-name="rowCrawlerImageIndex" @selection-change="handleCrawlerImageSelectionChange" ref="crawlerImage">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="文章来源" prop="sourceUrl" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.sourceUrl" placeholder="请输入文章来源" />
            </template>
          </el-table-column>
          <el-table-column label="media_id(未知1)" prop="mediaId" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.mediaId" placeholder="请输入media_id(未知1)" />
            </template>
          </el-table-column>
          <el-table-column label="哈希值" prop="hashName" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.hashName" placeholder="请输入哈希值" />
            </template>
          </el-table-column>

          <el-table-column label="爬虫服务器上的地址" prop="physicalAddress" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.physicalAddress" placeholder="请输入爬虫服务器上的地址" />
            </template>
          </el-table-column>
          <el-table-column label="预览" prop="physicalAddress" width="80">
            <template #default="scope">
              <image-preview :src="scope.row.physicalAddress" :width="50" :height="50"/>
            </template>
          </el-table-column>

          <el-table-column label="ftp服务器上的地址" prop="compressAddress" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.compressAddress" placeholder="请输入ftp服务器上的地址" />
            </template>
          </el-table-column>
          <el-table-column label="预览" prop="compressAddress" width="80">
            <template #default="scope">
              <image-preview :src="scope.row.compressAddress" :width="50" :height="50"/>
            </template>
          </el-table-column>

          <el-table-column label="更新时间" prop="modifyTime" width="240">
            <template #default="scope">
              <el-date-picker clearable
                v-model="scope.row.modifyTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择更新时间">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="排序ID" prop="sortId" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.sortId" placeholder="请输入排序ID" />
            </template>
          </el-table-column>
          <el-table-column label="高度" prop="height" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.height" placeholder="请输入高度" />
            </template>
          </el-table-column>
          <el-table-column label="宽度" prop="width" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.width" placeholder="请输入宽度" />
            </template>
          </el-table-column>
          <el-table-column label="news_type(未知1)" prop="newsType" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.newsType" placeholder="请输入news_type(未知1)" />
            </template>
          </el-table-column>

          <el-table-column label="图片url" prop="imgUrl" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.imgUrl" placeholder="请输入图片url" />
            </template>
          </el-table-column>
          <el-table-column label="预览" prop="imgUrl" width="80">
            <template #default="scope">
              <image-preview :src="scope.row.imgUrl" :width="50" :height="50"/>
            </template>
          </el-table-column>

          <el-table-column label="use_type(未知0)" prop="useType" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.useType" placeholder="请输入use_type(未知0)" />
            </template>
          </el-table-column>
          <el-table-column label="status(未知0)" prop="status" width="80">
            <template #default="scope">
              <el-input v-model="scope.row.status" placeholder="请输入status(未知0)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 预览文章 -->
     <el-dialog title="预览" v-model="openPreview" width="375px" append-to-body>
        <h2 style="font-weight: 600;">{{ articleObj.title }}</h2>
        <p>{{ articleObj.author }}</p>
        <p>{{ articleObj.releaseTime }}</p>
        <div class="rich-text-wrapper">
          <div class="rich-text-content" v-html="articleObj.content"></div>
        </div>
     </el-dialog>

  </div>
</template>

<script setup name="News">
import { listNews, getNews, delNews, addNews, updateNews, publishNews, getCrawlerNewsDto } from "@/api/news/news";
import { publishNewsToTnaot } from "./tnaotApi";
import { addPublish } from "@/api/news/publish";
import { ref } from "vue";
import { ElLoading } from 'element-plus'

import { getArticleBySourceId } from "@/api/news/article";

const router = useRouter();

const { proxy } = getCurrentInstance();

let loadingMask = null

const newsList = ref([]);
const crawlerImageList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const checkedCrawlerImage = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: null,
    sourceId: null,
    sourceUrl: null,
    title: null,
    author: null,
    newsChannel: null,
  },
  rules: {
    sourceId: [
      { required: true, message: "源文章ID不能为空", trigger: "blur" }
    ],
    sourceUrl: [
      { required: true, message: "文章来源不能为空", trigger: "blur" }
    ],
    mediaId: [
      { required: true, message: "media_id(未知1)不能为空", trigger: "blur" }
    ],
    crawlTime: [
      { required: true, message: "爬取时间不能为空", trigger: "blur" }
    ],
    releaseTime: [
      { required: true, message: "发布时间不能为空", trigger: "blur" }
    ],
    title: [
      { required: true, message: "完整标题不能为空", trigger: "blur" }
    ],
    author: [
      { required: true, message: "作者名称不能为空", trigger: "blur" }
    ],
    clickCount: [
      { required: true, message: "点击量不能为空", trigger: "blur" }
    ],
    reviewCount: [
      { required: true, message: "浏览量不能为空", trigger: "blur" }
    ],
    upCount: [
      { required: true, message: "点赞量不能为空", trigger: "blur" }
    ],
    opposeCount: [
      { required: true, message: "拉踩量不能为空", trigger: "blur" }
    ],
    checkStatus: [
      { required: true, message: "check_status(未知2)不能为空", trigger: "change" }
    ],
    isDeleted: [
      { required: true, message: "是否删除不能为空", trigger: "blur" }
    ],
    tag: [
      { required: true, message: "标签不能为空", trigger: "blur" }
    ],
    modifyTime: [
      { required: true, message: "更新时间不能为空", trigger: "blur" }
    ],
    newsChannel: [
      { required: true, message: "新闻频道(国际)不能为空", trigger: "blur" }
    ],
    newsType: [
      { required: true, message: "news_type(未知1)不能为空", trigger: "change" }
    ],
    videoCount: [
      { required: true, message: "视频数量不能为空", trigger: "blur" }
    ],
    imageCount: [
      { required: true, message: "图片数量不能为空", trigger: "blur" }
    ],
    thumbCount: [
      { required: true, message: "图集数量不能为空", trigger: "blur" }
    ],
    lang: [
      { required: true, message: "lang(未知0)不能为空", trigger: "blur" }
    ],
    crawlReviewCount: [
      { required: true, message: "爬虫浏览量不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

// ==========================

// 预览资讯
const articleObj = ref({
  title: '',
  author: '',
  releaseTime: '',
  content: ''
})
const openPreview = ref(false)

/** 查询资讯列表 */
function getList() {
  loading.value = true;
  listNews(queryParams.value).then(response => {
    newsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    sourceId: null,
    sourceUrl: null,
    mediaId: null,
    crawlTime: null,
    releaseTime: null,
    title: null,
    shortTitle: null,
    author: null,
    clickCount: null,
    reviewCount: null,
    upCount: null,
    opposeCount: null,
    checkStatus: null,
    isDeleted: null,
    tag: null,
    modifyTime: null,
    remark: null,
    newsChannel: null,
    newsType: null,
    videoCount: null,
    imageCount: null,
    thumbCount: null,
    lang: null,
    crawlReviewCount: null,
    officialNewsId: null,
    mediaChannelId: null,
    category: null,
    newsFeature: null,
    crawlIp: null
  };
  crawlerImageList.value = [];
  proxy.resetForm("newsRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加资讯";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value
  getNews(_id).then(response => {
    form.value = response.data;
    crawlerImageList.value = response.data.crawlerImageList;
    open.value = true;
    title.value = "修改资讯";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["newsRef"].validate(valid => {
    if (valid) {
      form.value.crawlerImageList = crawlerImageList.value;
      if (form.value.id != null) {
        updateNews(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addNews(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除资讯编号为"' + _ids + '"的数据项？').then(function() {
    return delNews(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 预览按钮操作 */
function handlePreview(row) {
  articleObj.value.title = row.title
  articleObj.value.author = row.author
  articleObj.value.releaseTime = row.releaseTime
  getArticleBySourceId(row.sourceId).then(res => {
    articleObj.value.content = res.data.content
    openPreview.value = true
  })
}

/** 发布按钮操作 */
// function handlePublish0 (row) {
//   proxy.$modal.confirm('发布资讯编号为"' + row.id + '"的数据项？').then(() => {
//     return publishNews(row.id);
//   }).then(() => {
//     proxy.$modal.msgSuccess("发布成功");
//   }).catch(() => {});
// }
/** 发布按钮操作 */
function handlePublish (row) {
  proxy.$modal.confirm('推送资讯编号为"' + row.id + '"的数据项？').then(() => {
    getCrawlerNewsDto(row.id).then(res1 => {
      loadingMask = ElLoading.service({ text: "推送中，请稍候", background: "rgba(0, 0, 0, 0.7)", })
      publishNewsToTnaot(res1.data).then(res2 => {
        addPublish({
          newsId: row.id,
          requestBody: JSON.stringify(res1.data),
          responseNewsId: res2.newsId
        }).then(res3 => {
          proxy.$modal.msgSuccess("推送成功")
          getList()
        })
      }).finally(e => {
        loadingMask.close()
      })
    })
  }).catch(() => {})
}

/** 复制链接 */
function handlerCopyPath(path) {
  navigator.clipboard.writeText(path)
  proxy.$modal.msgSuccess("复制成功")
}

/** 图片序号 */
function rowCrawlerImageIndex({ row, rowIndex }) {
  row.index = rowIndex + 1;
}

/** 图片添加按钮操作 */
function handleAddCrawlerImage() {
  let obj = {};
  obj.sourceUrl = "";
  obj.mediaId = "";
  obj.hashName = "";
  obj.description = "";
  obj.physicalAddress = "";
  obj.compressAddress = "";
  obj.modifyTime = "";
  obj.sortId = "";
  obj.height = "";
  obj.width = "";
  obj.newsType = "";
  obj.imgUrl = "";
  obj.useType = "";
  obj.status = "";
  crawlerImageList.value.push(obj);
}

/** 图片删除按钮操作 */
function handleDeleteCrawlerImage() {
  if (checkedCrawlerImage.value.length == 0) {
    proxy.$modal.msgError("请先选择要删除的图片数据");
  } else {
    const crawlerImages = crawlerImageList.value;
    const checkedCrawlerImages = checkedCrawlerImage.value;
    crawlerImageList.value = crawlerImages.filter(function(item) {
      return checkedCrawlerImages.indexOf(item.index) == -1
    });
  }
}

/** 复选框选中数据 */
function handleCrawlerImageSelectionChange(selection) {
  checkedCrawlerImage.value = selection.map(item => item.index)
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('news/news/export', {
    ...queryParams.value
  }, `news_${new Date().getTime()}.xlsx`)
}

getList();
</script>

<style scoped lang="scss">
.rich-text-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.rich-text-content {
  width: 360px;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: content-box;
  overflow: hidden;
}

.rich-text-content :deep(img) {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.router-link {
  color: #409eff;
  display: inline-flex;
  align-items: center;
  overflow-x: auto;
  &>span {
    margin: 0 0 0 6px;
  }
}
.router-link:hover {
  color: #9fceff;
}
</style>
